<template>
  <view class="content">
    <top-bar></top-bar>
    <!-- 商品列表 -->
    <view class="main_left_cont">
      <view class="main_items flex" v-if="goodsList.length > 0">
        <view class="main_item" v-for="(item, idx) in goodsList" :key="idx">
          <image class="main_src" mode="aspectFill" :src="item.thumb + '?imageView2/1/w/576/h/576/q/75'"></image>
          <view class="main_info">
            <view class="main_name">{{ item.title }}</view>
            <view class="main_ename">{{ item.subtitle }}</view>
            <view class="main_box flex">
              <view class="flex">
                <view class="main_price">
                  <text>￥</text>
                  {{ item.price }}
                </view>
                <view class="sale_price">￥{{ item.original_price }}</view>
              </view>
              <view class="main_add" @click="addCart(item.id)">+</view>
            </view>
          </view>
        </view>
      </view>
      <view class="main_items flex" v-else-if="goodsList.length == 0 && isLoaded"><view class="noneGoods">暂无品类可选</view></view>
    </view>
    
    <goods-detail v-if="cartShow" :goodsId="goodsId" @cartIsShow="cartIsShow" :inte="1"></goods-detail>
  </view>
</template>

<script>
import topBar from '@/components/topBar.vue';
import goodsDetail from '@/components/goodsDetail.vue';
import { INTEGRAL_GOODS_LIST } from '@/api';
export default {
  name: 'IndexPage',
  components: {
    topBar,
    goodsDetail
  },
  data() {
    return {
      goodsId: null,
      cartShow: false,
      goodsList: [],
      storeId: this.$store.state.storeConf.store_id,
      finished: false,
      listQuery: {
        page: 1,
        pageSize: 20
      },
      pages: '', //总页数
      isLoaded: false //加载未完成
    };
  },
  onLoad() {
    let t = this
      setTimeout(() => {
      uni.showLoading();
      t.getIntegralGoodsList();
    }, 200)
  },
  onReachBottom() {
    //上拉加载
    let that = this;
    if (that.listQuery.page < that.pages) {
      this.getIntegralGoodsList();
    }
  },
  methods: {
    // 获取积分商品
    getIntegralGoodsList() {
      let that = this;
      //that.loading = true;
      let qsData = {
        store_id: that.storeId,
        page: that.listQuery.page,
        limit: that.listQuery.pageSize
      };
      that.$_get(INTEGRAL_GOODS_LIST, qsData).then(res => {
        if (res.code === 1) {
          that.pages = Math.ceil(res.data.count / that.listQuery.pageSize); //总页数
          that.goodsList = that.goodsList.concat(res.data.list);
          if (res.data.list.length < that.listQuery.pageSize) {
            that.finished = true;
          } else {
            that.listQuery.page++;
          }
        } else {
          that.$common.msgToShow(res.msg);
        }
        uni.hideLoading();
        that.isLoaded = true;
      });
    },
    // 加入购物车
    addCart(id) {
      this.goodsId = id;
      this.cartShow = true;
    },
    cartIsShow(data) {
      this.cartShow = data;
    }
  }
};
</script>

<style scoped>
.content {
  font-size: 14px;
  width: 100%;
}

.main_left_cont {
  background: #2a2a2a;
  height: 100%;
  width: 100%;
  padding-top: 8vw;
}

.main_items {
  width: 88vw;
  margin: 2vw auto;
}

.main_item {
  background: #373737;
  margin-right: 40px;
  margin-bottom: 24px;
  box-shadow: 0 0 5px 2px rgba(200, 173, 103, 0.6);
  border-radius: 5px;
}

.main_item:nth-child(4n + 4) {
  margin-right: 0;
}

.main_src {
  width: 192px;
  height: 192px;
  background: #333333;
}

.main_info {
  padding: 10px 6px;
  box-sizing: border-box;
  width: 192px;
  color: #f8f8f8;
}

.main_name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
  font-size: 14px;
}

.main_ename {
  font-size: 12px;
}

.main_box {
  margin-top: 8px;
  justify-content: space-between;
}

.main_price {
  font-size: 16px;
  line-height: 38px;
  color: red;
}

.main_price text {
  font-size: 12px;
}

.sale_price {
  font-size: 11px;
  line-height: 38px;
  text-decoration: line-through;
}

.main_add {
  width: 38px;
  height: 38px;
  background: #c8ad67;
  border-radius: 5px;
  color: #232323;
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  line-height: 34px;
}
.noneGoods {
  height: 300px;
  line-height: 300px;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  width: 100%;
}
</style>
